<template>
	<view>
		<view @click="hideTab">
			<view-topbb></view-topbb>
<fudong></fudong>
			<view class="city">

				<!-- 搜索 -->
				<view class="ss">

					<view class="inp" style="padding-bottom: 20rpx;">
						<input @confirm="toSearch" v-model="keyword" type="text" placeholder="请输入地级市进行搜索">
						<view @click="toSearch" class="inp-icon">
							<image src="/static/images/ss.png" mode="widthFix"></image>
						</view>
					</view>


					<!-- <view class="xuanze">
		<view class="ti1">
			北京市
		</view>
		<view class="jiant">
			>
		</view>
		<view class="ti1">
			市
		</view>
	</view> -->
				</view>

				<view class="city_item flex1">
					<!-- 左侧滑动导航栏 -->
					<view class="city_item_left color81">
						<scroll-view :scroll-y="true" style="height:68vh;overflow: scroll;">

							<view :class="indexsp == index ? 'active' : ''" v-for="(item,index) in province"
								@tap="setProvince(index)" :data-index="index">{{item.name}}</view>
						</scroll-view>
					</view>
					<!-- 右侧选择导航栏 -->
					<view class="city_item_right">
						<!-- 选中城市展示 -->
						<view class="current">
							<text class="hot_title">已开放加盟</text>
							<!-- <view class="flex1">
				
				<view>
					<text v-for="(item,index) in current"
						@click="setCity(item)">{{item}}{{index != (current.length-1) ? '、' : ''}}</text>
				</view>
			</view> -->
						</view>
						<!-- 城市选项展示 -->
						<view>

							<!-- 城市选项 -->
							<view class="hot">
								<!-- 根据侧边导航选项索引决定右侧渲染的城市数据 -->
								<button @click="cs(item)" v-for="(item,index) in city.joinList"
									:class="indexOfs(current,item) ? 'active' : ''">{{item.name}}</button>
							</view>
							<!-- 确认按钮 -->
							<!-- <button class="submit f08btn" @tap="back">确定</button> -->
						</view>
						<view style="margin-top: 30rpx;" v-if="city.unJoinList && city.unJoinList.length>0">

							<!-- 选中城市展示 -->
							<view class="current">
								<text class="hot_title">暂未开放加盟</text>
								<!-- <view class="flex1">
				
				<view>
					<text v-for="(item,index) in current"
						@click="setCity(item)">{{item}}{{index != (current.length-1) ? '、' : ''}}</text>
				</view>
			</view> -->
							</view>
							<!-- 城市选项展示 -->
							<view>

								<!-- 城市选项 -->
								<view class="hot">
									<!-- 根据侧边导航选项索引决定右侧渲染的城市数据 -->
									<button v-for="(item,index) in city.unJoinList"
										style="color: #9c9c9c;">{{item.name}}</button>
								</view>
								<!-- 确认按钮 -->
								<!-- <button class="submit f08btn" @tap="back">确定</button> -->
							</view>
						</view>

					</view>
				</view>
			</view>



		</view>
		<view-tabbar :current="3" ref="tabbar"></view-tabbar>
	</view>
</template>

<script>
	import topbb from '@/components/topbb.vue'
	import Tabbar from '@/components/tabbar.vue'
	import fudong from '@/components/fudong.vue'
	// 导入省市数据
	import cityData from '@/components/map/cityData.js';
	// 导入热门城市数据
	import hotData from '@/components/map/hotData.js'


	export default {
		data() {
			return {
				keyword: '',
				// 省市数据
				province: [],
				// 省市数据
				city: [],
				// 侧边导航选项索引
				indexsp: '0',
				// 选中城市数组
				current: [],
				// 热门城市数据
				hotlist: hotData
			};
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		onLoad(options) {
			let that = this;
			// 将页面传递过来的数据使用"|"符号分割开,存储到变量current中
			that.current = options.city ? options.city.split('|') : [];
		},
		components: {
			'view-topbb': topbb,
			'view-tabbar': Tabbar,
			fudong
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})

			this.$api.article_area_data({}, res => {
				if (res.code == 200) {
					this.province = res.data
					this.getCity()
				}
			})

		},
		methods: {
			hideTab(){
				this.$refs.tabbar.yincs()
			},
			toSearch() {
				if (!this.keyword) {
					return
				}
				uni.navigateTo({
					url: `/pages/csxz/index?keyword=${this.keyword}`,
				})
			},
			getCity() {

				this.$api.article_area_data({
					parentCode: this.province[this.indexsp].code
				}, res => {
					if (res.code == 200) {
						this.city = res.data
					}
				})

			},
			indexOfs(list, name) {
				return list.indexOf(name) != -1;

			},
			setCity(city) { // city 当前点击的城市

				let that = this;
				// 选中的城市数组
				let current = that.current;
				// 将当前点击城市在选中城市数组中检索,将结果赋值给变量index
				let index = current.indexOf(city);
				// if (city == '不限') {
				// 	that.current = [city];
				// } else 
				if (index != -1) {
					//index不等于-1代表选中数组中已有当前点击城市
					//从返回的城市数组位置进行删除一个元素
					that.current.splice(index, 1)

				} else if (current.length < 4) {
					// 当选中的城市数少于4个时
					// let indexs = that.current.indexOf('不限');
					// indexs > -1 ? that.current.splice(indexs, 1) : '';
					// 将当前点击城市push进选中城市数组
					that.current.push(city);
				} else { //弹窗提示,选中城市不能超过4个
					uni.showToast({
						title: '城市不能超过4个',
						icon: 'none'
					})
				}
			},
			// 确定按钮触发函数
			back() {
				// 将数据通过|符号切割开
				let city = this.current.join('|');
				// 组件传值
				uni.$emit('setCity', city);
				// 返回上一个页面
				uni.navigateBack({
					delta: 1,

				})
			},
			cs(item) {
				let a = this.province[this.indexsp].name
				uni.navigateTo({
					url: `/pages/csxz/index?id=${item.articleId}&province=${a}&city=${item.name}`,
				})
			},

			// 侧边导航点击处理函数
			setProvince(e) {
				// 将点击元素的索引赋值到变量indexsp中
				this.indexsp = e
				this.getCity()
			}
		}
	}
</script>


<style lang="scss" scoped>
	.submit {
		position: fixed;
		bottom: 10rpx;
		width: 500rpx
	}

	.f08btn {
		// background-color: #f08300 !important;
		// color: #fff;
		font-size: 28rpx;
	}

	.city {
		width: 100%;
		margin-top: -20rpx;
		position: fixed;

		&_title {
			margin-bottom: 60rpx;
		}

		&_item {
			padding-bottom: 20rpx;
			align-items: flex-start;

			&_left {
				width: 210rpx;
				display: inline-block;
				background: #fff;

				view {
					// text-align: center;
					padding: 22rpx;
					font-size: 30rpx;
				}

				.active {
					color: #00943a;
					background: #f3f5f7;
				}
			}

			&_right {
				width: 500rpx;
				display: inline-block;
				padding-left: 20rpx;
				position: fixed;
				overflow: scroll;
				height: 68vh;


				button {
					border: 1rpx solid #f6f6f6;
				}

				.current {
					padding: 20rpx 30rpx 0 0;

					// 当前城市样式
					.hot_title {
						width: 100%;
						display: inline-block;
						color: #555;
						line-height: 1;
						vertical-align: middle;
						margin-bottom: 22rpx;
						font-size: 30rpx;
					}

					.flex1 {
						color: orange;

						.data-v-57280228 {}

						text {
							font-size: 14px;
						}
					}

					.icon {
						width: 30rpx;
						height: 35rpx;
						display: inline-block;
						vertical-align: middle;
					}

					view {

						justify-content: space-between;

						view {
							width: calc(100% - 40rpx);

							text {
								display: inline-block;
							}
						}
					}
				}

				.hot {
					button {
						color: #555555;
						width: 100%;
						height: 65rpx;
						background: transparent;
						padding: 0 12rpx;
						display: inline-block;
						font-size: 30rpx;
						text-align: left;
						margin: 18rpx 20rpx 0 0;
					}

					button:after {
						border-color: #eee;
					}

					// .active {
					// 	color: #f08300;
					// 	border: 1rpx solid #f08300;
					// }

					// .active:after {
					// 	border-color: #f08300;
					// }

				}
			}
		}

	}

	.ss {
		margin: auto;
		background: #fff;

		.inp {
			position: relative;
			border-radius: 50rpx;
			margin: auto;
			.inp-icon{
				
					width: 100rpx;
				position: absolute;
				z-index: 2;
				right:40rpx;
				top: 0;
				bottom: 20rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			image {
				width: 30rpx;

			}

			input {
				font-size: 28rpx;
				background: #f3f5f7;
				width: 85%;
				margin: auto;
				padding: 20rpx 20rpx;
				border-radius: 50rpx;
				margin-top: 20rpx;
				margin-bottom: 0rpx;
				line-height: 1.7;



			}
		}

		.xuanze {

			width: 85%;
			margin: auto;
			display: flex;
			align-items: center;
			font-size: 33rpx;
			padding: 20rpx 0;
			color: #00943a;

		}
	}

	.jiant {
		margin: 0 10rpx;
	}
</style>